<template>
  <view class="image-container">
    <view class="img-item" v-for="(item, index) in showImages" :key="index" :style="item.imgStyle">
      <custom-image :isPreviewImage="false" :showMenuByLongpress="false" :src="item.src" :urls="urls" :current="index" />
      <view class="num-tip" v-if="showNum && item.showNum">{{pictureTotal || images.length}}</view>
    </view>
  </view>
</template>

<script>
	import customImage from '@/components/image';

  export default {
    components: {
      customImage,
    },
    props: {
      images: {
        type: Array,
        default: () => [],
      },
      pictureTotal: {
        type: Number,
        default: 0,
      },
      showNum: {
        type: Boolean,
        default: true,
      },
    },
    data: () => ({
      imgWith1: 'calc((100vw - 60rpx - 10rpx) / 2)',
      imgWith2: 'calc(100vw - 60rpx)',
    }),
    computed: {
      urls() {
        return this.images.map(item => item && item.picturePath);
      },
      showImages() {
        let { images } = this;
        const { pictureTotal, imgWith1, imgWith2 } = this
        const length = images.length;
        let imgStyle = `width:${imgWith1};height:${imgWith1};`;
        if (length > 4) {
          images = images.filter((item, index) => index < 4);
        }
        if (length === 2) {
          images = images.filter((item, index) => index < 1);
        }
        images = images.map((item, index) => {
          let showNum = false;
          if (length > 2) {
            imgStyle = `width:${imgWith1};height:${imgWith1};`;
          }
          if (length <= 2) {
            imgStyle = `width:${imgWith2};height:${imgWith2};`;
          }
          if (length > 4) {
            showNum = index === 3;
          }
          if (length === 2) {
            showNum = index === 0;
          }
          if (length === 1 && pictureTotal > 1) {
            showNum = index === 0;
          }
          if (length === 3 && index === 2) {
            imgStyle = `width:${imgWith2};height:${imgWith1}`;
          }
          if (length >= 3 && index === 0) {
            imgStyle = `${imgStyle}margin-right:10rpx;`;
          }
          if (length >= 4 && (index === 0 || index === 2)) {
            imgStyle = `${imgStyle}margin-right:10rpx;`;
          }
          return {
            src: item && item.picturePath,
            showNum,
            imgStyle,
          };
        });
        // console.log('showImages', images);
        return images;
      }
    },
    methods: {},
    watch: {},

    // 组件周期函数--监听组件挂载完毕
    mounted() {},
    // 组件周期函数--监听组件数据更新之前
    beforeUpdate() {},
    // 组件周期函数--监听组件数据更新之后
    updated() {},
    // 组件周期函数--监听组件激活(显示)
    activated() {},
    // 组件周期函数--监听组件停用(隐藏)
    deactivated() {},
    // 组件周期函数--监听组件销毁之前
    beforeDestroy() {},
  };
</script>

<style scoped lang="less">
.image-container {
  margin-top: 30rpx;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  .img-item {
    position: relative;
    width: calc((100vw - 60rpx - 10rpx) / 2);
    height: calc((100vw - 60rpx - 10rpx) / 2);
    border-radius: 8rpx;
    overflow: hidden;
    // &:nth-child(1) {
    //   margin-right: 10rpx;
    // }
    &:nth-child(3) {
      margin-top: 10rpx;
      // margin-right: 10rpx;
    }
    &:nth-child(4) {
      margin-top: 10rpx;
      // margin-right: 10rpx;
    }
    .num-tip {
      position: absolute;
      z-index: 1;
      right: 32rpx;
      bottom: 32rpx;
      font-family: ArialMT;
      font-size: 36rpx;
      color: #FFFFFF;
      text-align: center;
      line-height: 36rpx;
      text-shadow: 0 0 20px rgba(0,0,0,0.50);
    }
  }
}
</style>
